<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <title>搜索店铺</title>
    <link rel="stylesheet" href="css/weui.min.css">
    <link rel="stylesheet" href="css/jquery-weui.css">
    <link rel="stylesheet" href="css/demos.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="./js/swiper.min.css"/>
</head>
<style>
    body {
        background-color: #fff;
    }

    .search_container_box {
        display: none;
    }

    .search_history {
        padding: 20px 15px;
        font-size: 12px;
    }

    .history_title {
        font-size: 12px;
        color: #A9A9A9;
    }

    .history_content {
        margin-top: 5px;
        display: flex;
        flex-wrap: wrap;
    }

    .history_content span {
        box-sizing: border-box;
        padding: 4px 8px;
        background-color: #f0f0f0;
        border-radius: 5px;
        max-width: 100px;
        margin: 0 10px 10px 0;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
    }

    .contaienr_item p:first-child {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
    }

    .search_history_box {
        margin-top: 10px;
    }

    .search_history_box:first-child {
        margin-top: 0;
    }

    .filter_sort {
        width: 100%;
        display: none;
    }

    .nav {
        width: 100%;
        background-color: #f5f5f5;
        display: flex;
        align-items: center;
        position: relative;
    }

    .nav > li {
        width: 33.33%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 0;
        font-size: 12px;
    }

    .screen_content {
        width: 100%;
        position: absolute;
        top: 100%;
        background-color: #fff;
        left: 0;
        font-size: 14px;
        color: #333;
        display: none;
    }

    .screen_content > li {
        padding: 10px 20px;
    }

    .active {
        color: #FF0000;
    }

    .screen_content:after {
        content: "";
        position: fixed;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
    }

    .contaienr_item_card_box2 {
        flex: 1;
        justify-content: flex-end;
    }

    .distance {
        color: #808080;
        font-size: 14px;
    }
</style>

<body ontouchstart>
<div class="search_top">
    <a href="javascript:void (0)" onclick="toIndex()"><img src="./images/xiangzuo.png" alt="" class="back"></a>
    <input type="text" placeholder="请输入商铺名称" class="searchInput">
    <span class="search_btn">搜索</span>
</div>
<div style="height: 44px;"></div>
<div class="filter_sort">

</div>
<div class="search_history">
    <div class="search_history_box">
        <span class="history_title">关键字搜索</span>
        <div class="history_content" id="wordsList">

        </div>
    </div>

</div>
<!-- 搜索展示的内容 -->
<div class="search_container_box" id="shopList">


</div>
</body>
<script src="js/jquery-2.1.4.js"></script>
<script src="js/jquery-weui.js"></script>
<script src="js/swipe.js"></script>
<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=ZSXGYc4z7RLVClUmrlL1w9cH9DRghNuw"></script>
<script src="wxJs/utils/contain.js"></script>
<script src="wxJs/utils/storage.js"></script>
<script>
    var currentLat
    var currentLng
    var userId = GetQueryString("userId");
    if (!userId){
        window.history.back(-1);
    }
    /*获取用户当前地址*/
    var map = new BMap.Map("allmap");
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function (r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            currentLat = r.point.lat;   //纬度
            currentLng = r.point.lng;  //经度
        } else {
            alert('failed' + this.getStatus());
        }
    }, {enableHighAccuracy: true});


    $(function () {

        // 关键字筛选事件
        $('.history_content').on('click', 'span', function () {
            querySomeShopBywordsId($(this).attr('wordsId'));
            $('.filter_sort').fadeIn(300);
            $('.search_container_box').slideDown(300);
            $('.search_history').hide();
        })

        $('.nav>.li_nav').on('click', function () {
            $('.search_container_box').slideDown(300);
            $('.search_history').hide();
            $(this).toggleClass('active').siblings().removeClass('active');
            $(this).children('i').toggleClass('icon-xia icon-shang')
            $(this).siblings().children('i').removeClass('icon-shang').addClass('icon-xia');
            $(this).siblings().children('.screen_content').hide();
            $(this).children('.screen_content').toggle(300);
        })
        $('.screen_content li').on('click', function () {
            $(this).addClass('active').siblings().removeClass('active');
            $('.search_container_box').fadeIn(1000);
            $('.search_history').hide();
        })
        // 搜索按钮事件
        $('.search_btn').on('click', function () {
            var _searchInput = $('.searchInput').val()
            if (!_searchInput) {
                return
            }
            $('.filter_sort').fadeIn(300);
            $('.search_container_box').slideDown(300);
            $('.search_history').hide();
            querySomeShopByInput(_searchInput)
        })
        /*关键字列表*/
        selectWordsList()
    })

    /*返回首页*/
    function toIndex() {
        window.location.href = "index.html?userId="+userId
    }

    function selectWordsList() {
        $.get(getWeiContextPath() + "/wx/data/selectWordsList", {}, function (res) {
            var _wordsList = $('#wordsList').empty()
            $.each(res, function (i, obj) {
                _wordsList.append('<span wordsId="' + obj.id + '">' + obj.importWords + '</span>')
            })
        });
    }

    //根据关键字查询
    function querySomeShopBywordsId(wordsId) {
        $.post(getWeiContextPath() + "/wx/shop/querySomeShop", {
            wordsId: wordsId,
            currentLat: currentLat,
            currentLng: currentLng
        }, function (res) {
            var _shopList = $('#shopList').empty();
            $.each(res.list, function (i, obj) {
                var rjf = 1 * obj.discountRatio * res.returnRatio * 10;
                _shopList.append('<a href="store.html?shopId=' + obj.shopId + '&userId='+userId+'">\n' +
                    '        <div class="search_container">\n' +
                    '            <img src="' + getImgSrc(obj.imgUrls) + '" alt="">\n' +
                    '            <div class="contaienr_item">\n' +
                    '                <p class="contaienr_item_title">' + obj.shopName + '</p>\n' +
                    '                <p class="contaienr_item_address">优惠说明：每1元可以获得' + rjf.toFixed(2) + '积分</p>\n' +
                    '                <div class="contaienr_item_card">\n' +

                    '                    <div class="contaienr_item_card_box2">\n' +
                    '                        <div class="distance">\n' +
                    '                            <i class="iconfont icon-julilujing"></i> ' + (obj.distancenum / 1000) + 'km\n' +
                    '                        </div>\n' +
                    '                    </div>\n' +
                    '                </div>\n' +
                    '            </div>\n' +
                    '        </div>\n' +
                    '    </a>')
            })
        })
    }

    /*根据输入店铺名查询*/
    function querySomeShopByInput(inputContent) {
        $.post(getWeiContextPath() + "/wx/shop/querySomeShop", {
            inputContent: inputContent,
            currentLat: currentLat,
            currentLng: currentLng
        }, function (res) {
            var _shopList = $('#shopList').empty();
            $.each(res.list, function (i, obj) {
                var rjf = 1 * obj.discountRatio * res.returnRatio * 10;
                _shopList.append('<a href="./store.html?shopId=' + obj.shopId + '&userId='+userId+'">\n' +
                    '        <div class="search_container">\n' +
                    '            <img src="' + getImgSrc(obj.imgUrls) + '" alt="">\n' +
                    '            <div class="contaienr_item">\n' +
                    '                <p class="contaienr_item_title">' + obj.shopName + '</p>\n' +
                    '                <p class="contaienr_item_address">优惠说明：每1元可以获得' + rjf.toFixed(2) + '积分</p>\n' +
                    '                <div class="contaienr_item_card">\n' +

                    '                    <div class="contaienr_item_card_box2">\n' +
                    '                        <div class="distance">\n' +
                    '                            <i class="iconfont icon-julilujing"></i> ' + (obj.distancenum / 1000) + 'km\n' +
                    '                        </div>\n' +
                    '                    </div>\n' +
                    '                </div>\n' +
                    '            </div>\n' +
                    '        </div>\n' +
                    '    </a>')
            })
        })
    }

</script>

</html>